extends ./layout.jade

append vars
  - className = 'styleguide'

block title
  title Styleguide | DemocracyOS

block content
  .cover
    .styleguide-container
      h1 Styleguide
      h3 CSS Base Styles for DemocracyOS

  mixin color(code, text)
    .item
      .color(style='background-color:#{code}')
      span= text || code
  .styleguide-container
    h2 Colors
    .colors
      +color('#563c5c')
      +color('#3d699e')
    h3 Shades of Grey
    .colors
      +color('rgba(0,0,0, .8)', 'rgba(#000, .8)')
      +color('#666')
      +color('#e5e5e5')
      +color('#f0f0f0')
      +color('#f9f9f9')

    h2 Headings
    .example
      h1 Heading One
      h2 Heading Two
      h3 Heading Three
      h4 Heading Four
      h5 Heading Five
    code.example
      div h1 Heading One
      div h2 Heading Two
      div h3 Heading Three
      div h4 Heading Four
      div h5 Heading Five

    h2 Paragraphs
    .example
      p.lead This is the lead paragraph. This is the lead paragraph. This is the lead paragraph. This is the lead paragraph. This is the lead paragraph. This is the lead paragraph.
      p Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. <a href="#">This is a link</a>. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.
      p Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
    code.example
      div p.lead This is the lead paragraph. This is the lead paragraph. This is the lead paragraph. This is the lead paragraph. This is the lead paragraph. This is the lead paragraph.
      br
      div p Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. #{'<a href="#">This is a link</a>'}. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.
      br
      div p Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

    .buttons
      h2 Buttons
      .example
        button.btn.btn-default(type='button') Default
        button.btn.btn-primary(type='button') Primary
        button.btn.btn-success(type='button') Success
        button.btn.btn-danger(type='button') Danger
        button.btn.btn-link(type='button') Link
      code.example
        div button.btn.btn-default(type='button') Default
        div button.btn.btn-primary(type='button') Primary
        div button.btn.btn-success(type='button') Success
        div button.btn.btn-danger(type='button') Danger
        div button.btn.btn-link(type='button') Link

    .alerts
      h2 Alerts
      .example
        .alert.alert-success(role='alert') <strong>Well done!</strong> You successfully read this important alert message.
        .alert.alert-info(role='alert') <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
        .alert.alert-warning(role='alert') <strong>Warning!</strong> Better check yourself, you're not looking too good.
        .alert.alert-danger(role='alert') <strong>Oh snap!</strong> Change a few things up and try submitting again.
      code.example
        div= '.alert.alert-success(role=\'alert\') <strong>Well done!</strong> You successfully read this important alert message.'
        div= '.alert.alert-info(role=\'alert\') <strong>Heads up!</strong> This alert needs your attention, but it\'s not super important.'
        div= '.alert.alert-warning(role=\'alert\') <strong>Warning!</strong> Better check yourself, you\'re not looking too good.'
        div= '.alert.alert-danger(role=\'alert\') <strong>Oh snap!</strong> Change a few things up and try submitting again.'
